<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人信息</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>

				<li v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
				</li>
				<li v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
						<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
					<a href="myShop.html">创建商品</a>
					<dl class="layui-nav-child">
						<dd><a href="myShopOrder.html">商家订单</a></dd>
					</dl>
				</li>
			</ul>


			<div style="text-align: center;width: 305px;height: 440px;vertical-align: middle;white-space: normal;margin: 0 auto;position: absolute;z-index: 2;left: 50%;top: 45%;margin-left: -150px;
margin-top: -220px;">
				<div>
					<h1 style="margin-bottom:10px;margin-left: 60px;font-family:Microsoft Yahei;">个人资料</h1>
				</div>
				<div>
					<label class="layui-form-label">用户名:</label>
					<label class="layui-form-label" style="text-align: left;line-height: 20px;padding-left:10px;">{{username}}</label>
				</div>
		
				<div>
					<label class="layui-form-label">昵称:</label>
					<div class="layui-input-block">
						<input v-model="userShowName2" placeholder="请输入昵称" class="layui-input">
					</div>
				</div>

				<div>
					<label class="layui-form-label">真实姓名:</label>
					<div class="layui-input-block">
						<input v-model="userRealName" placeholder="真实姓名" class="layui-input">
					</div>
				</div>
				<div class="layui-form" lay-filter="filter" style="margin-bottom: 2px;">
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-block">
						<input lay-filter="filter" type="radio" name="Sex" value="1" title="男">
						<input lay-filter="filter" type="radio" name="Sex" value="0" title="女">
					</div>
				</div>


				<div>
					<label class="layui-form-label">地址:</label>
					<div class="layui-input-block">
						<input v-model="Address" placeholder="请输入地址" class="layui-input">
					</div>
				</div>

				<div>
					<label class="layui-form-label">Email:</label>
					<div class="layui-input-block">
						<input v-model="Email" placeholder="请输入电子邮箱地址" class="layui-input">
					</div>
				</div>

				<div>
					<label class="layui-form-label">固定电话:</label>
					<div class="layui-input-block">
						<input v-model="Telephone" placeholder="请输入固定电话" class="layui-input">
					</div>
				</div>

				<div>
					<label class="layui-form-label">移动电话:</label>
					<div class="layui-input-block">
						<input v-model="Mobile" placeholder="请输入地址" class="layui-input">
					</div>
				</div>
				<div>
					<label class="layui-form-label">用户类型:</label>
					<label class="layui-form-label" style="color:darkorange;text-align: left;line-height: 20px;padding-left:10px;">{{usertype|typefil}}</label>
					<button @click="shopApplication" v-show="usertype==0"class="layui-btn layui-btn-danger" style="margin-top:5px;line-height:0px;text-align:left;height:30px;width:90px;float:left;">申请店铺</button>
				</div>
				<div style="margin-top: 40px;">
					<label class="layui-form-label">新密码:</label>
					<div class="layui-input-block" style="height:38px;">
						<input v-model="newPassWord" placeholder="您可以在此输入新密码" class="layui-input">
					</div>
				</div>
			
				<div id="userTwoButton">
					<div style="margin-left: 60px;margin:10px;">
						<button class="layui-btn layui-btn-fluid"  @click="save" style="width:295px;float: left;">保存</button>
					</div>
				</div>
	
			</div>
		</div>



		<!-- 搜索框 -->





		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					page: 1,
					userShowName2: '',
					userShowName: "请登录",
					userRealName: '',
					usertype: 0,
					shoppingcartnumber: 0,
					loginflag: false,
					Sex: 1,
					Address: '',
					Email: '',
					Telephone: '',
					Mobile: '',
					newPassWord:'',
					username:''



				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					},
					typefil:function(value){
						value:Number(value)
						if(value==0)
						return "普通用户"
						else
						return "商家用户"
					}
				},

				methods: {
					save:function(){
						let param = new URLSearchParams()
						param.append('userId', $cookies.get("userId"))
						param.append('passWord', $cookies.get("passWord"))
						param.append('userName', $cookies.get("userName"))
						param.append('userShowName', vm.userShowName2)
						param.append('userRealName', vm.userRealName)
						param.append('Sex', vm.Sex)
						param.append('Address', vm.Address)
						param.append('Email', vm.Email)
						param.append('Telephone', vm.Telephone)
						param.append('Mobile', vm.Mobile)
						if(vm.newPassWord!='')
						param.append('newPassWord', vm.newPassWord)

						console.log(param.toString())
						if (!vm.loginflag) //从未登陆过
						{
							layui.use('layer', function(){
								layer.msg("请先登录再使用购物车功能")
							});
						} else { //重新验证登陆信息	
						if(vm.userShowName=='')
						{
							layui.use('layer', function(){
								layer.msg("昵称不能为空",{icon: 2})
							});
						}
						else
						{
							console.log(vm.userShowName)
							console.log(111)
							axios.post(URL + '/user/Update', param)
							.then(function(response) {
												
								if (response.data.code == 1) {
										layui.use('layer', function(){
											layer.msg("更新个人资料成功")
										});
										location.reload();							
												
								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)
												
								}
							})
							.catch(function(error) {
								console.log(error);
							});
						}
						}
					},
					shopApplication:function(){
						console.log("申请店铺")
						layui.use('layer', function(){
						  var layer = layui.layer;
						     layer.open({
						                          //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
						                          type: 2,
						                          title: "申请店铺",
												  area:['400x','400px'],
						                          content:['shopApplication.html','no']//引用的弹出层的页面层的方式加载修改界面表单
						                      });
						});     
						
					},
					test: function() {
						console.log(this)
					},
					//跳转登陆页
					loginplease: function() {
						if (this.loginflag) {
							window.location.href = 'user.html'; //跳转主页
						} else {
							window.location.href = 'login.html'; //跳转主页
						}
					},



				},
				created: function() {
					// checklogin()
					checklogin().then(x => {
						if (x) {
							if ($cookies.get("userName") != null)
								this.username= $cookies.get("userName")
							if ($cookies.get("sex") != null)
									this.Sex= $cookies.get("sex")
							if ($cookies.get("userShowName") != null)
								{this.userShowName = $cookies.get("userShowName");
								this.userShowName2 = $cookies.get("userShowName");
								}
							if ($cookies.get("userRealName") != null)
								this.userRealName = $cookies.get("userRealName");
							if ($cookies.get("address") != null)
								this.Address = $cookies.get("address");
							if ($cookies.get("email") != null)
								this.Email = $cookies.get("email");
							if ($cookies.get("telephone") != null)
								this.Telephone = $cookies.get("telephone");

							if ($cookies.get("mobile") != null)
								this.Mobile = $cookies.get("mobile");
							if ($cookies.get("userType") != null)
								this.usertype = $cookies.get("userType");
						
							this.loginflag = $cookies.get("loginflag")
							layui.use('form', function() {
								var form = layui.form;
								console.log(456)
								form.val("filter", {
									"Sex": vm.Sex // "name": "value"
								});
								form.render();

							});

						} else {
							layui.use('layer', function() {
								var layer = layui.layer;
								layer.open({
									title: "提示" //不显示标题栏
										,
									closeBtn: false,
									shade: 0.8,
									id: 'LAY_layuipro' //设定一个id，防止重复弹出
										,
									btn: ['确认', '取消'],
									btnAlign: 'c',
									moveType: 1 //拖拽模式，0或者1
										,
									type: 0,
									content: '请重新登陆再使用个人主页功能',
									yes: function(index, layero) {
										window.location.href = 'login.html'
										layer.close(index);
									},
									btn2: function(index, layero) {
										window.location.href = 'index.html'
									}
								});
							});
						}
					})


				},
				mounted: function() {

				}

			})
		</script>


		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});
			layui.use('form', function() {
				var form = layui.form;
				form.on('radio(filter)', function(data) {
					vm.Sex = data.value; //被点击的radio的value值
				});
				form.render();

			});
		</script>

	</body>
</html>
